{% extends 'base_dashboard.html' %}

{% block title %}{{ ticket.reference }} — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  .msg-bubble {
    border-radius: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: .85rem;
    max-width: 92%;
  }
  .msg-bubble.mine { background: #eff6ff; border: 1px solid #dbeafe; margin-left: auto; }
  .msg-bubble.staff { background: #f0fdf4; border: 1px solid #bbf7d0; }
  .msg-bubble.other { background: #f8fafc; border: 1px solid #e2e8f0; }
  .msg-meta { font-size: .72rem; color: #64748b; margin-bottom: .35rem; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
  <div>
    <div class="text-muted small mb-1">{{ ticket.reference }}</div>
    <h4 class="fw-bold mb-1">{{ ticket.subject }}</h4>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <span class="badge bg-light text-dark border">{{ ticket.get_category_display }}</span>
      {% if ticket.priority == 'high' %}<span class="badge text-bg-danger">High</span>
      {% elif ticket.priority == 'medium' %}<span class="badge text-bg-warning">Medium</span>
      {% else %}<span class="badge text-bg-secondary">Low</span>{% endif %}
      {% if ticket.status == 'open' %}<span class="badge text-bg-warning">Open</span>
      {% elif ticket.status == 'in_progress' %}<span class="badge text-bg-primary">In Progress</span>
      {% elif ticket.status == 'resolved' %}<span class="badge text-bg-success">Resolved</span>
      {% else %}<span class="badge text-bg-secondary">Closed</span>{% endif %}
    </div>
  </div>
  <a href="{% url 'support:ticket_list' %}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-arrow-left me-1"></i>All Tickets
  </a>
</div>

<div class="row g-4">
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm rounded-4 mb-3">
      <div class="card-body p-4">
        {% for msg in messages_list %}
          <div class="msg-bubble {% if msg.author_id == request.user.id %}mine{% elif msg.is_staff_reply %}staff{% else %}other{% endif %}">
            <div class="msg-meta">
              <strong>{{ msg.author.get_display_name }}</strong>
              {% if msg.is_staff_reply %}<span class="badge bg-success-subtle text-success ms-1">Staff</span>{% endif %}
              · {{ msg.created_at|date:"M d, Y H:i" }}
            </div>
            <div style="white-space:pre-line;">{{ msg.body }}</div>
          </div>
        {% empty %}
          <p class="text-muted mb-0">No messages yet.</p>
        {% endfor %}
      </div>
    </div>

    {% if ticket.status != 'closed' or is_staff %}
    <div class="card border-0 shadow-sm rounded-4">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-3">Add reply</h6>
        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="action" value="reply">
          {{ reply_form.body }}
          {% if reply_form.body.errors %}<div class="text-danger small mt-1">{{ reply_form.body.errors.0 }}</div>{% endif %}
          <button type="submit" class="btn btn-primary mt-3">
            <i class="bi bi-reply me-1"></i>Send reply
          </button>
        </form>
      </div>
    </div>
    {% else %}
    <div class="alert alert-secondary">This ticket is closed. Create a new ticket if you need more help.</div>
    {% endif %}
  </div>

  <div class="col-lg-4">
    <div class="card border-0 shadow-sm rounded-4 mb-3">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-3">Details</h6>
        <div class="small mb-2"><span class="text-muted">Opened by</span><br><strong>{{ ticket.created_by.get_display_name }}</strong> ({{ ticket.created_by.get_role_display }})</div>
        <div class="small mb-2"><span class="text-muted">Created</span><br>{{ ticket.created_at|date:"M d, Y H:i" }}</div>
        <div class="small"><span class="text-muted">Last update</span><br>{{ ticket.updated_at|date:"M d, Y H:i" }}</div>
      </div>
    </div>

    {% if is_staff and status_form %}
    <div class="card border-0 shadow-sm rounded-4 mb-3">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-3">Staff controls</h6>
        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="action" value="status">
          <div class="mb-3">
            <label class="form-label small fw-semibold">Status</label>
            {{ status_form.status }}
          </div>
          <div class="mb-3">
            <label class="form-label small fw-semibold">Priority</label>
            {{ status_form.priority }}
          </div>
          <button type="submit" class="btn btn-dark w-100">Update ticket</button>
        </form>
      </div>
    </div>
    {% endif %}

    {% if can_delete %}
    <div class="card border-0 shadow-sm rounded-4 border-danger-subtle">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-2 text-danger">Danger zone</h6>
        <p class="small text-muted mb-3">Permanently delete this ticket and all replies. Only admins can do this.</p>
        <form method="post" action="{% url 'support:ticket_delete' ticket.pk %}" onsubmit="return confirm('Delete ticket {{ ticket.reference }} permanently?');">
          {% csrf_token %}
          <button type="submit" class="btn btn-outline-danger w-100">
            <i class="bi bi-trash3 me-1"></i>Delete ticket
          </button>
        </form>
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}